<template>
  <div class="index">
    <van-tabs v-model="active">
      <van-tab
      v-for="channel in channels"
      :title='channel.name'
      :key="channel.id">
      <article-list :channel="channel"></article-list>
      </van-tab>
    </van-tabs>
      <!-- 频道列表 开关 通过定位 通过它打开频道管理的弹层 -->
    <div class="bar-btn" @click="isShowChannelEdit=true">
        <van-icon name="wap-nav"/>
    </div>

    <!-- 文章--更多操作 -->

    <!-- https://vant-contrib.gitee.io/vant/#/zh-CN/action-sheet -->
    <!-- 底部弹出层 -->
    <van-action-sheet
    title="频道管理"
    v-model="isShowChannelEdit">
       <channel-edit
       :channel="channels"
       :curIndex='active'
       @fixed-active-index="hFixedActiveIndex"
       @call-channel="callChannel">

       </channel-edit>
    </van-action-sheet>
  </div>
</template>
<script>
import { getChannels } from '../../api/channel.js'
import channelEdit from './channelEdit.vue'
import ArticleList from './articleList'

export default {
  name: 'Index',
  data () {
    return {
      active: 0, // tabs中选中的下标
      channels: [], // 频道列表
      isShowChannelEdit: false // 是否显示频道编辑弹层
    }
  },
  components: {
    ArticleList,
    channelEdit
  },
  created () {
    this.loadChannels()
  },
  methods: {
    // 当频道管理组件中，删除的 频道 在当前频道 之前，
    // 要把active-1
    hFixedActiveIndex () {
      this.active--
    },
    callChannel (idx) {
      this.active = idx
      this.isShowChannelEdit = false
    },
    async loadChannels () {
      try {
        const res = await getChannels()
        console.log(res)
        this.channels = res.data.data.channels
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .bar-btn {
    position: fixed;
    right: 5px;
    top: 57px;
    display: flex;
    align-items: center;
    background-color: #fff;
    opacity: 0.8;
    z-index:1;
    .van-icon-wap-nav{
      font-size: 20px;
    }
  }
</style>
